<template>
	<view class="main">
		<u-tabs 
		:list="tablist" 
		bg-color="#2e8bf0" 
		inactive-color="#FFFFFF" 
		active-color="#FFFFFF" 
		font-size="32rpx" 
		:is-scroll="true" 
		:current="current" 
		@change="change"></u-tabs>
		
		<view class="swiper-list">
			<swiper class="swiper" :current="current" @change="swiperChange">
				<swiper-item class="swiper-item">
					<scroll-view class="item" style="height: 100%;" scroll-y="true">
						
						<view class="navbox">
							<view class="navs">
								<text class="text">总售货数</text>
								<text class="num">{{total}}</text>
							</view>
							<view class="navs">
								<text class="text">较上月</text>
								<view class="num">
									<!-- <image src="/static/rise.png" mode="aspectFill" /> -->
								{{lastCount - currentCount}}</view>
							</view>
						</view>
						
						
						 
						<view style="width: 100%; height:500rpx">
							<l-f2 ref="chart"></l-f2>
						</view>
						
						
						
						<view class="list-public-title">
							<text>售货情况</text><image src="/static/icon-11.png"></image>
						</view>
						
						<view class="list-box" v-for="(item,key) in orderlist">
							<view class="list-top-box u-border-bottom">
								<text class="goods-name clamp1">{{item.goods_name}}</text>
								<text class="goods-price">￥{{item.order_amount}}</text>
							</view>
							<view class="list-center">
								<text>货品数量：1</text>
								<text>是否使用优惠券：{{item.coupon_amount > 0 ? '是' : '否'}}</text>
								<text>原价：{{item.market_price}}</text>
								<text>优惠券：{{item.coupon_amount}}</text>
								<text>活动价：{{item.price}}</text>
								<text>日期：{{$u.timeFormat(item.pay_time,'yyyy年mm月dd日')}}</text>
							</view>
						</view>
						
						
						<view style="height: 200rpx;"></view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view class="item" scroll-y>
						<view class="navbox">
							<view class="navs">
								<text class="text">本月返利金额</text>
								<text class="num">{{monthTotal}}</text>
							</view>
							<view class="navs">
								<text class="text">本季度返利金额</text>
								<view class="num">{{quarterTotal}}</view>
							</view>
						</view>
						
						<view class="rebate-tab">
							<text :class="on == 0 ? 'on' : ''" @click="statistics(0)">月度统计</text>
							<text :class="on == 1 ? 'on' : ''" @click="statistics(1)">季度统计</text>
							<text :class="on == 2 ? 'on' : ''" @click="statistics(2)">年度统计</text>
						</view>
						<view class="statistics-list u-border-bottom" v-for="(item,key) in rebatelist">
							<text class="title">{{item.text}}</text>
							<view class="price-box">
								<text>总售：{{item.total_price ? item.total_price : 0}}</text>
								<text>总提成：{{item.commission_price ? item.commission_price : 0}}</text>
							</view>
						</view>
						<!-- <view class="rebate-list"></view> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<u-tabbar v-model="barcurrent" :list="list" ></u-tabbar>
	</view>
</template>
<style lang="scss">
	.statistics-list{
		display: flex;
		flex-direction: column;
		margin: 0 32rpx;
		padding: 32rpx 0;
		background-color: #FFFFFF;
		.title{
			font-size: 28rpx; font-weight: bold; margin-bottom: 24rpx;
		}
		.price-box{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 12rpx;
			color: #858585;
		}
	}
	.rebate-tab{
		display: flex;
		margin: 32rpx;
		height:70rpx;
		border-radius: 36rpx;
		border: #4eb0ff solid 1rpx;
		overflow: hidden;
		text{
			display: flex;
			flex:1;
			justify-content: center;
			line-height: 68rpx;	
		}
		.on{
			background-color: #1684fc;
			color: #FFFFFF;
		}
	}
	.rebate-box{
		display: flex;
		flex-direction: row;
		.rebate-item{
			display: flex;
			flex-direction: column;
			flex: 1;
			text{
				font-size: 28rpx;
			}
		}
	}
</style>
<script>
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';
	export default {
		data() {
			return {
				barcurrent:0,
				list:this.$u.api.tablist,
				tablist:[
					{name: '订单数据'},
					{name: '返利列表'}
				],
				current:0,
				orderlist:[],
				total:0,
				currentCount:0,
				lastCount:0,
				on:0,
				
				rebatelist:[],
				monthTotal:0,
				quarterTotal:0
			}
		},
		onLoad(){ 
			this.$u.http.get("/statistics/statistics/order").then(res => {
				this.total = res.data.total;
				this.currentCount = res.data.currentMonthCount;
				this.lastCount = res.data.lastCount;
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.source(res.data.sum, {
						sales: { tickCount: 5 }
					}); 
					chart.interval().position('month*sum').color('#19be6b');
					chart.render();
					return chart;
				}); 
			})
			this.$u.http.get("/statistics/statistics/rebate").then(res => {
				this.monthTotal = res.data.month_total;
				this.quarterTotal = res.data.quarter_total;
			})
			this.getDatas();
			this.statistics(0);
		},
		methods: {
			statistics(index){
				this.on = index;
				this.$u.http.get("/statistics/statistics/rebatelist",{index:index}).then(res => {
					this.rebatelist = res.data.list;
				})
			},
			getDatas(){
				this.$u.http.get("/statistics/statistics/list").then(res => {
					this.orderlist = res.data;
				})
			},
			swiperChange(e){
				this.current = e.detail.current;
			},
			change(e){
				this.current = e;
			}
		}
	}
</script>
<style lang="scss">
	page,.main{
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		background-color: #FFFFFF;
	}
	
	
	.list-public-title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 32rpx;
		image{
			width: 40rpx; height:40rpx
		}
	}
	
	.list-box{
		margin: 32rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		border: #e3e5e9 solid 1rpx;
		.list-top-box{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 94rpx;
			align-items: center;
			padding: 0 24rpx;
			.goods-price{
				color: #ff8f00;
			}
		}
		.list-center{
			height: 176rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			padding: 0 24rpx;
			text{
				width: 50%;
				display: block;
				float: left;
				font-size: 24rpx;
			}
		}
	}
	
	
	.navbox{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 32rpx;
		.navs{
			width: 326rpx;
			height: 160rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,0.1);
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			 
			.num{
				color: #ff9800; font-size: 30rpx; margin-top: 30rpx; font-weight: bold;
			}
			.num image{
				width: 32rpx; height: 22rpx; margin-right: 12rpx;
			}
		}
	}
	
	
	.swiper-list,.swiper,.swiper-item{
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #FFFFFF;
	}
</style>